/********************************************
AUTHOR: Erwin Aligam
WEBSITE: http://www.styleshout.com/
TEMPLATE NAME: Bright Side of Life
TEMPLATE CODE: S-0005
VERSION: 1.0
adapted by Ricardo Nishimura since: 2007/11
*******************************************/

/********************************************
HTML ELEMENTS
********************************************/

/* top elements */
* { padding: 0; margin: 0; }

body { margin: 0; padding: 0; font: .70em/1.5em Verdana, Tahoma, Helvetica, sans-serif; color: #555; background: #A9BAC3 url(../images/bg.jpg) repeat-x }

/* links */
a { color: #4284B0; background-color: inherit; text-decoration: none; }
a:hover { color: #9EC068; background-color: inherit; cursor:pointer; }

/* headers */
h1, h2, h3 { font: bold 1em 'Trebuchet MS', Arial, Sans-serif; color: #333; }
h1 { font-size: 1.5em; color: #6297BC; }
h2 { font-size: 1.4em; text-transform:uppercase;}
h3 { font-size: 1.3em; }

p, h1, h2, h3 { margin: 10px 0px 0; }
ul, ol { margin: 10px 30px; padding: 0 15px; color: #4284B0; }
ul span, ol span { color: #555; }

code { margin: 5px 0; padding: 10px; text-align: left; display: block; overflow: auto; font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace; /* white-space: pre; */ background: #fbfcff; border: 1px solid #EFF5FF; border-left: 4px solid #4284B0; }

/* form elements */
form { padding: 0px 10px 10px; border: 1px solid #fbfcff; background-color: #fbfcff; }
label { color:#999; display:block; font-weight:bold; margin-top:3px; }
input,select { padding: 2px; border:1px solid #D3EF86; font: normal 1em Verdana, sans-serif; color:#333; width: 97%; background-color: #fff; }
textarea { padding:2px; font: normal 1em Verdana, sans-serif; border:1px solid #D3EF86; color:#333; width: 99%; background-color: #fff; }
input.button, button { margin: 1px 0 1px; font: bold 1em Arial, Sans-serif; border: 1px solid #6297BC; background: #6297BC url(../images/tabright.gif) no-repeat right top; background-position:0% -45px; padding: 2px 3px; color: #fff; width: 70px; height: 22px; }
input.button:hover, button:hover { background: #9EC630 url(../images/tabright.gif) no-repeat right top; background-position:0% -3px; border: 1px #9EC630; cursor:pointer; }
input.input_date { width:90px; background-image: url(../images/calendar.png); background-repeat: no-repeat; background-position: right; }
input.input_num { width:90px; text-align: right; }
input:focus { background-color: #ffffcf; }
select.select_num { border:1px solid #D3EF86; width: 70px; }
input.input_checkbox { width: 16px; border: 0px; background-color: #fbfcff;}
.input_inline { margin-left: 4px; margin-top:1px; }
input.input_row { width: 97%; }
div.input_container { border:1px solid #D3EF86; padding: 0px; width: 99%; background-color: #fff; background-image: url(../images/calculator.png); background-repeat: no-repeat; background-position: right;}
input.input_calculator { padding: 2px; border: 0px; width: 88%; }
.inline_label { display: inline; font-weight: normal; }
/***********************
LAYOUT
************************/
#body-bg { width: 100%; height: 100%; background: url(../bg.jpg) repeat; }
#wrap { width: 90%; height: 100%; margin: 0 auto; text-align: left; background: url(../images/bg_20white.png) repeat; }
#content-wrap { clear: both; margin: 0; padding: 0; }

/* header */
#header { position: relative; height: 85px; background: url(../images/headerbg.gif) repeat-x 0% 100%; }
#header h1#logo { position: absolute; margin: 0; padding: 0; font: bolder 4em 'Trebuchet MS', Arial, Sans-serif; letter-spacing: -2px; top: 18px; left: 5px; }
#header h2#slogan { position: absolute; top:50px; left: 8px; color: #888; text-indent: 0px; font: bold 11px Tahoma, 'trebuchet MS', Sans-serif; text-transform: none; cursor:pointer; }
#header #locale { float: right; margin-top: 15px; }

/* main */
#main { float: right; margin-right: 10px; width: 72%; }
#template { display: none; }

/* sidebar */
#sidebar { float: left; width: 23%; margin: 0; padding: 0; display: inline; padding: 0 10px; display: none; }

/* Footer */
#footer { clear: both; background: url(../images/bg_75white.png) repeat; border-top: 5px solid #568EB6; margin: 0; padding: 0; height: 36px; font-size: 95%; }
#footer a { text-decoration: none; font-weight: bold; }
#footer .footer-left{ float: left; width: 65%; }
#footer .footer-right{ float: right; width: 30%; }

/* menu tabs */
#header ul { z-index: 999999; position: absolute; margin:0; padding: 0; list-style:none; right: 0; bottom: 6px !important; bottom: 5px; font: bold 13px Arial, 'Trebuchet MS', Tahoma, verdana, sans-serif; }
#header li { display:inline; margin:0; padding:0; }
#header a { float:left; background: url(../images/tableft.gif) no-repeat left top; background-position:0% -42px; margin:0; padding:0 0 0 4px; text-decoration:none; cursor: pointer; }
#header a span { float:left; display:block; background: url(../images/tabright.gif) no-repeat right top; background-position:100% -42px; padding:6px 15px 3px 8px; color: #FFF; }
#header a:hover span { color:#FFF; }
#header a:hover { background-position:0% 0px; }
#header a:hover span { background-position:100% 0px; }
#header .menu_current a { background-position:0% 0px; }
#header .menu_current a span { background-position:100% 0px; }
/* end menu tabs */

/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }

/* additional classes */
.clear { clear: both; }
.green { color: #9EC630; }

/* start - table */
#main table { border-collapse: collapse; width: 100%; }
#main th strong { color: #fff; }
#main th { background: #6297BC; padding-left: 10px; padding-right: 10px; color: #FFF; text-align: left; border-right: 1px solid #9BBACF; border-bottom: solid 1px #FFF; }
#main th.sort { cursor: pointer; }
#main th.sort:hover { cursor: pointer; background: #9EC630; border-right: 1px solid #B6D59A; }
#main th.date_col { width:6em; }
#main th.value_col { width:9%; }
#main th.description_col { width:40%; }
#main th.category_col { width:17%; }
#main th.account_col { width:13%; }
#main th.opt_col { width:10%; }
#main tr { height: 26px; }
#main td { padding-left: 5px; padding-right: 5px; border-right: 1px solid #FFF; }
#main tr.row-a { background-color: #FFF; }
#main tr.row-b { background-color: #EFF5FF; }
#main tr.row-a_future { background-color: #DFEFB3; font-style:italic; }
#main tr.row-b_future { background-color: #D7EF95; font-style:italic; }
#main tr.new_entry { background-image: url(../images/new.png); background-repeat: no-repeat; background-position: left; background-color: #ffffcf; }
#main td.col_r { text-align: right; }
#main td.col_c { text-align: center; }
#main tr.highlt:hover { background-color: #FEFF9F; }
#main tr.total { background-color: #D1E3EF; font-weight: bold; border-top: 1px solid #FFF;}
#main tr.total td { border-right: 1px solid #EFF9FF; }
#main tr.bg_delete { background-color: #F00; color: #FFF; }
#main tr.bg_delete:hover { background-color: #F00; }
#main .opt_delete { background: url(../images/delete.png) no-repeat left; padding-left: 16px; padding-top: 1px; cursor:pointer; }
#main .opt_ok { background: url(../images/accept.png) no-repeat left; padding-left: 16px; padding-top: 1px; cursor:pointer; }
#main .opt_edit { background: url(../images/pencil.png) no-repeat left; padding-left: 16px; padding-top: 1px; cursor:pointer; }
#main .opt_cancel { background: url(../images/cancel.png) no-repeat left; padding-left: 16px; padding-top: 1px; cursor:pointer; }
#main .hide { display: none; }
.neg { color: #F66; }
#main tr.total .neg { }
#main tr.bg_delete .neg { color: #FFF; }
#main td.selectSum { background: #FEFF6F; cursor:pointer; }
#main td.total.selectSum { background: #7FCCFF; }
#help { background: url(../images/bg_75white.png) repeat; padding: 12px; }
.glass { background: url(../images/bg_75white.png) repeat; padding: 10px; }
div.overflow { overflow: auto; }

.show_next { background: url(../images/bullet_arrow_up.png) no-repeat right; padding-right: 20px; cursor:pointer; }
.hide_next { background: url(../images/bullet_arrow_down.png) no-repeat right; padding-right: 20px; cursor:pointer; }
.tagCloud { cursor:pointer; color: #A7B5BF; }
.tagCloud:hover { text-decoration: underline; }
.tagSelect { color: #9EC630; }
.selectAll { font-size: 14px; font-weight: bold; display: block }

/* start - suggest list */
.ac_results { padding: 0px; border: 1px solid #D3EF86; background-color: white; overflow: hidden; z-index: 99999; }
.ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; color: #333; }
.ac_results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; line-height: 16px; overflow: hidden; border-bottom: 1px solid #efefef; }
.ac_loading {}
.ac_odd {}
.ac_over { background-color: #D1E3EF; }

/* summary table */
table.summary { background: #fff url(../images/toolbar-bg.png) repeat-x ; }
table.summary tr { background:none; }
table.summary td.first { width: 25%; }
#main table.summary td.value { padding-left: 0px; background-image: url(../images/vert-bg.gif); background-repeat: repeat-x; }

/* http://blog.leetsoft.com/2006/8/22/super-simple-css-bars */
div.bar-container { float: left; width: 70%; padding-top: 1px; text-align: left; }
div.bar-container div.pos { background-image: url(../images/bars.png); background-repeat: repeat-x; background-position:100% 0px; height: 14px; border-right: solid 1px #ccc; }
div.bar-container div.neg { background-image: url(../images/bars.png); background-repeat: repeat-x; background-position:100% -14px; height: 14px; }

/* pagination */
div.pagination { padding:3px; margin:3px; text-align:right; }
div.pagination select { padding: 1px 1px 1px 1px; width: 50px; }
div.pagination a { padding: 2px 5px 2px 5px; margin-right: 2px; border:1px solid #D3EF86; text-decoration: none; color: #9EC630; background-color: #fff; }
div.pagination a:hover { padding: 2px 5px 2px 5px; margin-right: 2px; background-color: #9EC630; color: #FFF; cursor:pointer; }

/* chart */
#main div.legend table { width: auto; }
#main div.legend tr { height: 14px; }
#main div.legend td { border-right: 0px }

/* rounded corner: f = form, t = table, g = glass */
.rc1f, .rc2f, .rc1t, .rc2t, .rc3t, .rc4t, .rc1g, .rc2g {font-size:1px; overflow:hidden; display:block;}
.rc1f {height:1px; background:#fbfcff; margin:0 2px;}
.rc2f {height:1px; background:#fbfcff; margin:0 1px;}

.rc1t {height:1px; background:#6297BC; margin:0 2px;}
.rc2t {height:1px; background:#6297BC; margin:0 1px;}
.rc3t {height:1px; background:#D1E3EF; margin:0 1px;}
.rc4t {height:1px; background:#D1E3EF; margin:0 2px;}

.rc1g {height:1px; background: url(../images/bg_75white.png) repeat; margin:0 2px;}
.rc2g {height:1px; background: url(../images/bg_75white.png) repeat; margin:0 1px;}
#tooltip {position: absolute; display: none; border: 1px solid #ff0; padding: 4px; background-color: #ffa; opacity: 0.90; z-index: 9999}
